<template>
    <div class="shuku">
        <p>书库:</p>
        <ul>
            <li v-for="(value) in cates" :key="value.cateid">
                {{ value.catename }}
            </li>

        </ul>
    </div>

</template>
<style>
.shuku {
    padding: 10px;

    p {
        border-bottom: 1px solid turquoise;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 10px 0px;
        li {
            font-size: 20px;
            font-weight: bold;
            color: #ccc;
            border: 1px solid turquoise;
            padding: 10px;
            margin-bottom: 10px;
        }
    }
}
</style>
<script>
export default {
    data() {
        return {
            isactive:'',
            cates: [
                { cateid: '2000', catename: "小说作品" },
                { cateid: '2300', catename: "人文社科" },
                { cateid: '2800', catename: "品质生活" },
                { cateid: '2500', catename: "两性情感" },
                { cateid: '2600', catename: "成功励志" },
                { cateid: '2400', catename: "经济管理" },
                { cateid: '2100', catename: "文学作品" },
                { cateid: '2200', catename: "文化艺术" },
                { cateid: '2900', catename: "自然科学" },
                { cateid: '2700', catename: "亲子少儿" },
                { cateid: '1200', catename: "杂志期刊" },
                { cateid: '3200', catename: "外文外版" }
            ]
        }
    },
}
</script>